﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Overlay</title>
	<link type="text/css" rel="Stylesheet" href="../../../src/log.css" />
</head>
<body>
	<h1>
		MooDialog - A MooTools Dialog plugin</h1>
	<p>
		With this MooTools plugin you can replace the ugly alert(), promt() and confirm()
		dialogs by your own stylish ones!
	</p>
	<h2>
		Demo and Examples</h2>
	<p>
		<a href="#" id="alert">Click here for an alert message</a>
	</p>
	<pre>
	new MooDialog.Alert('This is an alert message');
</pre>
	<p>
		<a href="#" id="confirm">Click here for a confirm message</a>
	</p>
	<pre>
	new MooDialog.Confirm('Are you sure you want to do this?', function(){
		new MooDialog.Alert('You are!')
	}, function(){
		new MooDialog.Alert('You are not');
	});
</pre>
	<p>
		<a href="#" id="prompt">Click here for a prompt message</a>
	</p>
	<pre>
	new MooDialog.Prompt('What is your name?', function(ret){
		new MooDialog.alert('Your name is '+ ret);
	});
</pre>
	<p>
		<a href="#" id="error">Click here for a error message</a>
	</p>
	<pre>
	new MooDialog.Error('O No, What have you done!?');
</pre>
	<p>
		You can set a title too or customize the fx. It is recommended to set the onInitialize,
		onBeforeOpen and onBeforeClose options as default options of MooDialog with <code>
			MooDialog.implement('options', {...});</code>. <a href="#" id="customized">Customized</a>
	</p>
	<pre>
	new MooDialog.Alert('This is a customized dialog',{
		title: 'Alert',
		onInitialize: function(wrapper){
			wrapper.setStyle('opacity', 0);
			this.fx = new Fx.Morph(wrapper, {
				duration: 600,
				transition: Fx.Transitions.Bounce.easeOut
			});
			this.overlay = new Overlay(this.options.inject, {
				duration: this.options.duration
			});
			if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
		},
		onBeforeOpen: function(){
			this.overlay.open();
			this.fx.start({
				'margin-top': [-200, -100],
				opacity: [0, 1]
			}).chain(function(){
				this.fireEvent('show');
			}.bind(this));
		},
		onBeforeClose: function(){
			this.fx.start({
				'margin-top': [-100, 0],
				opacity: 0
			}).chain(function(){
				this.fireEvent('hide');
			}.bind(this));
			this.overlay.close();
		},
		okText: 'It is really cool indeed!'
	});
</pre>
	<p>
		<a href="#" id="custom">Create a Dialog from an Element:</a> <strong id="el">This
			element will get into the Dialog</strong>
	</p>
	<pre>
	new Element('div', {text: 'This is a custom element'}).MooDialog();

	// Or an existing element from the DOM
	$('el').MooDialog();
</pre>
	<p>
		<a href="#youClickedYes" id="confirmLinkClick">Are you sure you want to delete this
			quick link</a>
	</p>
	<pre>
	$('confirmDelete').confirmLinkClick('Are you sure you want to click this link');
</pre>
	<p>
		<strong>Confirm form submit</strong>
	</p>
	<form action="#uSubmittedThisForm" method="get" id="formId">
	<input type="text" name="text" placeholder="type something" />
	<input type="submit" value="Click to submit" name="submitInput" />
	</form>
	<pre>
	$('formId').confirmFormSubmit('Are you sure you want to submit this form');
</pre>
	<p>
		<a href="#" id="iframe">MooTools.net in an IFrame</a>
	</p>
	<pre>
	new MooDialog.IFrame('http://www.mootools.net', {
		title: 'MooTools.net',
		'class': 'MooDialog myDialog'
	});
</pre>
	<p>
		<a href="#" id="request">Get Content by a Ajax Request</a> (needs the Request.HTML
		object)
	</p>
	<pre>
	var reqDialog = new MooDialog.Request('requestDemoText.php', null, {
		'class': 'MooDialog myDialog',
		autoOpen: false
	});
	// You want the request dialog instance to set the onRequest message, so you have to do it in two steps.
	reqDialog.setRequestOptions({
		onRequest: function(){
			reqDialog.setContent('loading...');
		}
	}).open();
</pre>
	<h2>
		Docs</h2>
	<a href="http://github.com/arian/MooDialog/blob/master/README.md">Check the docs on
		Github.com</a>
	<h2>
		Download</h2>
	MooTools <a href="http://mootools.net/forge/p/moodialog">Forge</a>
	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/util/effect/overlay.js"></script>
</body>
</html>
